<template>
  <el-card class="box-card">
    <el-image
      @click="$router.push('/home/about')"
      :src="store.state.BaseUrl + store.state.centerData[1].adminAvatar"
      fit="cover"
      class="avatar"
    />
    <h4>
      {{ store.state.centerData[0].uname }}
    </h4>
    <p class="motto">{{ store.state.centerData[0].motto }}</p>
    <div class="cardDetails">
      <div class="item" @click="$router.push('/home/main')">
        <h5>文章</h5>
      </div>
      <div class="item" @click="$router.push('/home/classify')">
        <h5>分类</h5>
      </div>
      <div class="item" @click="$router.push('/talk')">
        <h5>动态</h5>
      </div>
    </div>
    <a class="bookmark" @click="openBookMark">
      <div class="bookitem">
        <el-icon>
          <Management />
        </el-icon>
        加入书签
      </div>
    </a>
    <div class="callMy">
      <div @click="callMy(store.state.centerData[0].tel, '电话')"></div>
      <div @click="callMy(store.state.centerData[0].wechat, '微信')"></div>
      <div @click="callMy(store.state.centerData[0].qq, 'QQ')"></div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'
import { Management } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
const store: any = inject('store')
// 打开书签
const openBookMark = function () {
  ElNotification({
    title: '书签',
    message: '按CTRL+D 键将本页加入书签',
    duration: 2000,
  })
}
// 联系按钮
const callMy = (message: string, type: string): void => {
  // 复制文字
  navigator.clipboard.writeText(message)
  ElNotification({
    dangerouslyUseHTMLString: true,
    message: `<div style="color:#49b1f5">已复制  ${type + ':' + message}</div>`,
    duration: 2000,
    offset: 100,
  })
}
</script>
<style lang="scss" scoped>
.box-card {
  width: 280px;
  border-radius: 10px;
  .motto {
    font-size: 12px;
    color: #888;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-indent: 2em;
    letter-spacing: 2px;
  }

  h4 {
    margin: 10px 0 5px 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
  }

  :deep(.avatar) {
    display: block;
    width: 100px;
    height: 100px;
    transition: all 1s;
    margin: 0 auto;

    &:hover {
      transform: rotate(360deg);
    }
  }
}

.cardDetails {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 0px;
    padding: 10px 0;
    cursor: pointer;
    text-align: center;

    h5 {
      font-size: 14px;
      padding: 10px;
      color: #4c4948;
    }
  }
}

.bookmark {
  position: relative;
  display: block;
  color: #fff;
  background: #49b1f5;
  height: 32px;
  line-height: 32px;
  transition: all 1s;
  letter-spacing: 3px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: '';
    width: 100%;
    height: 100%;
    background: #ff7242;
    transform: translateX(-100%);
    transition: 1s all;
  }

  .bookitem {
    position: relative;
    z-index: 2;
  }

  i {
    transform: translateY(2px);
  }

  &:hover {
    letter-spacing: 5px;

    &::after {
      transform: translate(0);
    }
  }
}

.callMy {
  display: flex;
  margin: 15px 0;
  justify-content: center;

  div {
    width: 30px;
    height: 30px;
    margin: 0 15px;
    cursor: pointer;
    background-size: 30px 30px;
    background-position: center;

    &:nth-child(1) {
      background-image: url(@/assets/tel1.svg);
    }

    &:nth-child(2) {
      background-image: url(@/assets/wechat2.svg);
    }

    &:nth-child(3) {
      background-image: url(@/assets/QQ-circle-fill.svg);
    }
  }
}
</style>
